<template>
	<view>
		<view class="answer-container" v-if="!showResult">
			<view class="question">
				<view class="title">{{question.question}}</view>
				<view class="answer-list">
					<view @click="selectOption(index)" :class="index === selectedIndex ? 'selected': ''"
						class="answer-list-item" v-for="(item,index) in question.answerList" :key="item.name">
						<view class="option">{{item.option}}</view>
						<view class="label">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="submit-view">
				<van-button :disabled="selectedIndex == null" @click="submit" class="submit-btn" round="28"
					color="linear-gradient(180deg, #FFD182 0%, #FF8C11 100%)" block>提交</van-button>
			</view>
		</view>
		<!-- 结果页 -->
		<view class="answer-container" v-else>
			<view class="question" style="height: 1100rpx;">
				<view class="title">{{question.question}}</view>
				<view class="answer-list">
					<view class="answer-list-item"
						:class="question.answer === item.option ? 'correct' : (userAnswer === item.option ? 'error': '')"
						v-for="(item,index) in question.answerList" :key="item.name">
						<view class="option"
							:class="question.answer === item.option ? 'option-correct' : (userAnswer === item.option ? 'option-error': '')">
							{{item.option}}</view>
						<view class="label">{{item.name}}</view>
					</view>
				</view>

				<view class="tips">
					<image v-if="isCorrect" style="height: 32rpx; width: 432rpx;"
						src="https://abrsm.tech/static/correct1.png">
					</image>
					<image v-else style="height: 64rpx; width: 466rpx;"
						src="https://abrsm.tech/static/error1.png">
					</image>
				</view>
				<view class="explain">
					<view class="result">正确答案：{{question.answer}}</view>
					<view class="explain-text">解析：{{question.explan}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		formatDate1
	} from '../../../common/activity.js'
	export default {
		data() {
			return {
				questionIndex: 0,
				isCorrect: false, //是否正确
				userAnswer: '', //用户选择答案
				showResult: false, //是否展示结果页
				question: {},
				selectedIndex: null, // 存储当前选中的选项索引
			}
		},
		beforeMount() {
			console.log("========开始答题")
			const questionList = uni.getStorageSync("questionList")
			const serverDate = uni.getStorageSync("serverDate") || formatDate1(new Date().getTime())
			let question = questionList.filter(item => item.date === serverDate)
			console.log(question);
			
			//测试 ojnKr7fVyfd691u93yNa6MGH8yT0
			const memberInfo = uni.getStorageSync("memberInfo") || {}
			if(serverDate < '2025-05-18'){
				console.log("测试模块==============")
				let questionIndex = uni.getStorageSync('questionIndex') || 0
				if(questionIndex >= 7) {
					questionIndex = 0
				}
				this.questionIndex = questionIndex
				let tempQuestion = []
				tempQuestion.push(questionList[questionIndex])
				question = tempQuestion
				
				console.log("question =======",question)
			}
			
			if (question && question.length > 0) {
				this.question = question[0]
				if(this.question.isAnswer){
					this.showResult = true
					this.isCorrect = this.question.userAnswer === this.question.answer
					this.userAnswer = this.question.userAnswer
				}
			} else {
				console.log("题目不存在")
			}
		},
		onHide() {
			uni.removeStorageSync("questionList")
		},
		methods: {
			getClassName(index) {
				return {
					'selected': this.selectedIndex === index // 如果当前索引等于选中索引，则添加选中样式类
				};
			},
			selectOption(index) {
				this.selectedIndex = index; // 更新选中的索引
			},
			submit() {
				//客户选择答案
				const userAnswer = this.question.answerList[this.selectedIndex].option
				console.log("客户答案：",userAnswer,this.question.answer)
				if (userAnswer != this.question.answer) {
					//回答错误次数
					const anserCount = uni.getStorageSync(this.question.id) || 0
					if (anserCount + 1 >= 2) {
						//测试代码
						uni.setStorageSync("questionIndex",this.questionIndex + 1)
						//错误两次后提交
						this.showResult = true
						this.isCorrect = false
						this.userAnswer = userAnswer
						this.anserQuetion()
					} else {
						uni.showModal({
							title: '温馨提示', //标题
							content: '您还有一次机会', //提示内容
							showCancel: false //不显示取消按钮
						})
					}
					uni.setStorageSync(this.question.id, anserCount + 1)
				} else {
					//测试代码
					uni.setStorageSync("questionIndex",this.questionIndex + 1)
					//回答正确
					uni.removeStorageSync(this.question.id)
					//todo 提交
					this.showResult = true
					this.isCorrect = true
					this.userAnswer = userAnswer
					this.anserQuetion()
				}
				console.log("客户提交选择：", this.question.answerList[this.selectedIndex])
			},
			//答题记录
			anserQuetion() {
				uni.setStorageSync(this.question.id + "_" + this.question.date, true)
				const memberInfo = uni.getStorageSync("memberInfo") || {}
				this.$request({
					method: "POST",
					header: {
						"Content-Type": "application/json"
					},
					data: {
						openid: memberInfo.userToken,
						dataid: this.question.id,
						answer: this.question.answerList[this.selectedIndex].option,
						type: "1"
					},
					url: '/wx/addLog'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.answer-container {
		width: 100%;
		height: 100vh;
		background-image: url('https://maywork.oss-cn-shanghai.aliyuncs.com/static/bg-main.png');
		background-size: cover;
		background-repeat: none;

		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 60rpx;

		.question {
			width: 640rpx;
			height: 900rpx;
			border-radius: 32rpx;
			background: #FFF9EB;
			display: flex;
			flex-direction: column;
			padding: 40rpx;

			.tips {
				width: 100%;
				margin-top: 280rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.explain {
				margin-top: 60rpx;
				display: flex;
				flex-direction: column;

				.result {

					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 48rpx;
					letter-spacing: normal;
					/* text/标题 */
					color: #170606;
				}

				.explain-text {
					margin-top: 16rpx;
					font-family: PingFang SC;
					font-size: 14px;
					font-weight: normal;
					line-height: 24px;
					letter-spacing: normal;
					/* text/文本 */
					color: #6C6262;
				}
			}

			.title {
				font-size: 32rpx;
				color: #170606;
			}

			.answer-list {
				margin-top: 60rpx;
				display: flex;
				flex-direction: column;

				.selected {
					border: 2px solid #FF9A28 !important;
				}

				.correct {
					background: rgba(55, 185, 32, 0.12) !important;
					border: 2px solid #37B920 !important;
				}

				.error {
					background: rgba(233, 65, 44, 0.12) !important;
					border: 2px solid #E9412C !important;
				}

				&-item {
					margin-bottom: 20rpx;
					border-radius: 8px;
					background: rgba(255, 154, 40, 0.12);
					width: 92%;
					height: 90rpx;
					line-height: 100rpx;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					.option-correct {
						background: linear-gradient(180deg, #81E170 0%, #37B920 100%) !important;
					}

					.option-error {
						background: linear-gradient(180deg, #FF9782 0%, #FF3111 100%) !important;
					}

					.option {
						color: #fff;
						text-align: center;
						height: 56rpx;
						width: 56rpx;
						line-height: 56rpx;
						border-radius: 6px;
						background: linear-gradient(180deg, #FFD182 0%, #FF8C11 100%);
					}

					.label {
						margin-left: 30rpx;
					}
				}
			}
		}


		.submit-view {
			margin-top: 60rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.submit-btn {
				width: 64%;
				border-radius: 28px;
				background: inear-gradient(to right, #FFAA56, #FF9900);
			}
		}

	}
</style>